<!--
  @Author: Cyril Hou
  @Email: houshoushuai@gmail.com
-->

<template>
  <div class='error-message' v-if='value'>
    <div class="empty-state">
      <i class="empty-icon large ml-icon-issue"></i>
      <span class="empty-text">{{value}}</span>
    </div>
  </div>
</template>
<style lang='stylus' scoped>
@import "~@/stylesheets/vars"
.error-message {
  padding: 4px 10px;
  min-height: 32px;
  color: $danger;
  font-size: 14px;
  margin: 0;
  position: relative;
}
.empty-state {
  color: $danger
  .empty-text {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
  }
}
</style>
<script>
export default{
  props: {
    value: {
      default: '加载失败...',
      type: String
    }
  },
  data () {
    return {}
  },
  methods: {
    closeError: function () {
      this.$emit('input', false)
    }
  }
}
</script>
